<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-ua-compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title></title>
		<style>
			body,ul,p{
				margin:0;
				padding:0;
			}
			ul{
				list-style:none;
			}
			.container{
				margin:50px auto;
				width:300px;
				height:205px;
				/* background-color: pink; */
			}
			.container ul .tp{
				margin-bottom:6px;
				width:40px;
				height:30px;
				background-image: url('images/bg.png');
			/* 	background-repeat: no-repeat; */
			/* 	background-color: red; */
				background-position: -165px -421px;
			}
			.container ul p{
				display:inline-block;
				width:200px;
				height:25px;
				font-size:20px;
				text-indent:45px;
			}
			.container ul .text{
				margin-bottom:2px;
				width:300px;
				height:40px;
				background-color: #ddd;
			}
			.container ul .text:hover{
				background-color: yellow;
			}
			.container ul .text .same{
				font-size:20px;
				line-height:40px;
				text-indent:8px;
			}
		</style>
	</head>
	<body>
		<div class='container'>
			<ul>
				<li class='tp'>
					<p class='one'>美图欣赏</p>
				</li>
				<li class='text'>
					<p class='same'>风光人文</p>
				</li>
				<li class='text'>
					<p class='same'>动物微距</p>
				</li>
				<li class='text'>
					<p class='same'>鸟类摄影</p>
				</li>
				<li class='text'>
					<p class='same'>综合摄影</p>
				</li>
			</ul>
		</div>
	</body>
</html>
